<script setup lang="ts">

import {ref} from 'vue';
import {columnLabel} from '../columns';

const stripe = ref(true)
const bordered = ref(true)
const hover = ref(false)
const size = ref('medium')
const showHeader = ref(true)
const layout = ref('inline')

defineProps({
  tableData: Array,
  pagination: Object
})

const visible = ref(false)
const onOpen = () => {
  visible.value = true
}

const handleDelete = (id) => {
  emits('handleDeleteEdit', id)
}

const emits = defineEmits(['pageChangeEmit', 'handleEditEmit', 'handleDeleteEdit', 'handleDisableEmit'])

const pageChange = (pageInfo) => {
  emits('pageChangeEmit', pageInfo)
}

// 编辑按钮 , 通知父组件查询编辑的数据详情
const handleEdit = (id) => {
  emits('handleEditEmit', id)
}

// 启用禁用按钮事件
const handleDisable = (id, count, status) => {
  console.log("执行了handleDisable")
  // 护理项目被引用并且当前是启用状态(禁用)
  if (count > 0 && status === 1) {
    console.log("if (count > 0 && status === 1)")
    return
  }
  // 如果当前是禁用状态, 点击是启用, 当前是启用状态点击是禁用
  status = status === 0 ? 1 : 0
  emits('handleDisableEmit', {id, status})
}

</script>

<template>
  <t-space style="width: 100%">
    <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
    <t-table row-key="index" :data="tableData" :columns="columnLabel" :stripe="stripe" :bordered="bordered"
             :hover="hover" :table-layout="layout" :size="size" :pagination="pagination" :show-header="showHeader"
             :onPageChange="pageChange">
      <template #rowIndex="{ rowIndex }">
        {{ rowIndex + 1 }}
      </template>

      <template #image="{ row }">
        <div class="tdesign-demo-image-viewer__base">
          <t-image-viewer v-model:visible="visible" :images="[row.image]">
            <template #trigger>
              <div class="tdesign-demo-image-viewer__ui-image">
                <img :src="row.image" @click="onOpen"/>
              </div>
            </template>
          </t-image-viewer>
        </div>
      </template>

      <template #price="{ row }">
        {{ row.price?.toFixed(2) }}
      </template>

      <template #status="{ row }">
        <t-tag v-if="row.status == 1" theme="success">启用</t-tag>
        <t-tag v-if="row.status == 0" theme="danger">禁用</t-tag>
      </template>

      <template #op="{ row }">
        <div class="operateCon">
          <a class="btn-dl" :class="row.count > 0 ? 'disabled' : ''" @click="handleDelete(row.id)">
            删除
          </a>
          <a class="font-bt" :class="row.count > 0 ? 'disabled' : ''" @click="handleEdit(row.id)">
            编辑
          </a>
          <a class="delete font-bt" :class="row.count > 0 ? 'disabled' : ''"
             @click="handleDisable(row.id, row.count, row.status)">
            {{ row.status === 0 ? '启用' : '禁用' }}
          </a>
        </div>
      </template>
    </t-table>
  </t-space>
</template>

<style scoped></style>
